<template>
    <el-switch
        v-model="themeConfig.isDark"
        @change="changeDark"
        inline-prompt
		active-color="#0a0a0a"
		inactive-color="#dcdfe6"
		:active-icon="Sunny"
		:inactive-icon="Moon"
        >
    </el-switch>
</template>
<script setup>
import { Sunny, Moon } from "@element-plus/icons-vue";
import { reactive } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import { useStore } from "vuex";

const store =  useStore()

const themeConfig = reactive(computed(() => {
    return store.getters['theme/getThemeConfig']
}))

const changeDark = (val) => {
    store.commit('theme/setThemeConfig', {...themeConfig.value, isDark: val})
    if (val) {
        document.documentElement.setAttribute('data-theme', 'dark')
    } else {
        document.documentElement.setAttribute('data-theme', 'light')
    }

}
</script>